<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="static/layui/css/layui.css">
    <style>
/*        #layui-upload-drag-id-1{
            float: left;
        }
        #layui-upload-drag-id-2{
            float: right;
        }*/
    </style>
</head>
<body>
    <div class="layui-container">
        <div class="layui-row">&nbsp;</div>
        <div class="layui-row">
            <div class="layui-col-md3"></div>
            <div class="layui-col-md6">
                <form class="layui-form layui-form-pane" id="from_id" action="http://192.168.33.12/contract_sys/admin.php" method="post">
                    <div class="layui-form-item">
                        <label class="layui-form-label">姓名</label>
                        <div class="layui-input-block">
                            <input type="text" name="name" lay-verify="required|m_input_short" placeholder="请输入姓名" autocomplete="off" class="layui-input">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">手机号</label>
                            <div class="layui-input-inline">
                                <input type="text" name="phone" id="phone-id" lay-verify="required|phone" placeholder="请输入手机号" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <div class="layui-input-inline">
                                <a id="send-msg-btn" class="layui-btn">发送验证码</a>
                            </div>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">短信验证码</label>
                        <div class="layui-input-block">
                            <input class="layui-input" placeholder="请输入手机验证码" name="birthday" placeholder="请输入手机验证码"  lay-verify="required|m_verify_code">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">交易账号</label>
                        <div class="layui-input-block">
                            <input type="text" name="trad_number" lay-verify="required" placeholder="请输入交易账号" autocomplete="off" class="layui-input">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">银行账号</label>
                        <div class="layui-input-block">
                            <input type="text" name="bank_number" lay-verify="required" placeholder="请输入银行账号" autocomplete="off" class="layui-input">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">开户银行</label>
                        <div class="layui-input-block">
                            <input type="text" name="bank_name" lay-verify="required" placeholder="请输入开户银行" autocomplete="off" class="layui-input">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">支付宝账号</label>
                        <div class="layui-input-block">
                            <input type="text" name="alipay_account_number" lay-verify="required" placeholder="请输入支付宝账号" autocomplete="off" class="layui-input">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">开户行</label>
                        <div class="layui-input-block">
                            <input type="text" name="bank_name" lay-verify="required" placeholder="请输入开户行" autocomplete="off" class="layui-input">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">提现金额</label>
                        <div class="layui-input-block">
                            <input type="text" name="money" lay-verify="required" placeholder="请输入邀请码" autocomplete="off" class="layui-input">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <input type="hidden" name="id_card_img_id_1" id="id-card-img-1" value="">
                            <input type="hidden" name="id_card_img_id_2" id="id-card-img-2" value="">
                            <button  class="layui-btn" lay-filter="register" lay-submit="">提交</button>
                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                        </div>
                    </div>
                </form>
            </div>
            <div class="layui-col-md3"></div>
        </div>

        <div id="ImgPreview"></div>
    </div>

    <script type="text/javascript" src="static/jquery.min.js"></script>
    <script type="text/javascript" src="static/jquery.form.js"></script>
    <script src="static/layui/layui.js" charset="utf-8"></script>

    <script>
        //Demo
        layui.use(['form', 'layer', 'laydate','upload', 'util'], function(){
            $ = layui.jquery;
            var layer = layui.layer;
            var form = layui.form;

            //自定义验证规则
            form.verify({
                m_input_short:function (value) {
                    //验证长度是否超出限制,50个字
                    if (value != "") {
                        if(value.length > 10){
                            return '内容长度超出限制，最多 10 个字';
                        }
                    }
                },
                m_input_long:function (value) {
                    //验证长度是否超出限制,255个字
                    if (value != "") {
                        if(value.length > 255){
                            return '内容长度超出限制，最多 255 个字';
                        }
                    }
                },
                m_verify_code:function (value) {
                    if (value != "") {
                        var emReg = /^\d{4}$/;
                        if(!emReg.test(value)) {
                            return "请填写正确的手机验证码!";
                        }
                    }
                }
            });

            //监听提交
            form.on('submit(register)', function(data){
                $("#from_id").ajaxSubmit({
                    beforeSubmit:function () {
                        /* 表单提交前： */
                    },
                    success:function (data) {
                        /* 服务器成功返回数据了 */
                        if (data.code == 1) {
                            /* 返回code为1，表示有错误 */
                            layer.msg(data.msg,{icon:5,time:1500});
                        } else {
                            /* 否则，表示操作成功 */
                            layer.msg("添加成功", {icon: 6});
                            /*TODO 跳转*/
                        }
                    }
                });
                return false;
            });
        });
        
        $('#send-msg-btn').bind('click', function () {
            /* 手机号验证 */
            var phone = $.trim($('#phone-id').val());
            if (phone.length == 0) {
                layer.msg('请填写手机号', {icon: 5});
                return;
            }
            if (isPhoneNo(phone) == false) {
                layer.msg('请填写正确的手机号', {icon: 5});
                return;
            }

            /* TODO 检测手机号是否已经被注册 */

            if (!$(this).hasClass('layui-btn-disabled')) {
                /* TODO 调用短信接口，发送验证码 */

                $(this).addClass('layui-btn-disabled');
                /* 60s倒计时 */
                var serverTime = new Date().getTime();
                var endTime = serverTime + 59 *1000;

                /*60s倒计时*/
                layui.util.countdown(endTime, serverTime, function(date, serverTime, timer){
                    window.console.log(date)
                    var second = date[3];
                    $('#send-msg-btn').html(second + ' s');
                    if (second == 0) {
                        $('#send-msg-btn').html('发送验证码');
                        $('#send-msg-btn').removeClass('layui-btn-disabled');
                    }
                });
            }
        });


        // 验证手机号
        function isPhoneNo(phone) {
            var pattern = /^1[34578]\d{9}$/;
            return pattern.test(phone);
        }

        // 验证中文名称
        function isChinaName(name) {
            var pattern = /^[\u4E00-\u9FA5]{1,6}$/;
            return pattern.test(name);
        }

        /* 验证身份证 */
        function isCardNo(card) {
            var pattern = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
            return pattern.test(card);
        }
    </script>
</body>
</html>